<template>
	<view class="content">
		<view class="section-pop">
			<view class="form-item">
				<view class="label">停电天数</view>
				<view class="input">
					<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入停电天数"
						v-model="form.td_day"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">工程分类</view>
				<view class="input">
					<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入工程分类"
						v-model="form.gc_fl"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">停电设备类型</view>
				<view class="input">
					<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入停电设备类型"
						v-model="form.sb_type"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">停电设备</view>
				<view class="input">
					<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入停电设备"
						v-model="form.sb_name"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">工程性质</view>
				<view class="input">
					<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入工程性质"
						v-model="form.gc_xz"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">工作单位</view>
				<view class="input">
					<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入工作单位"
						v-model="form.work_dw"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">工作内容</view>
				<view class="input">
					<u--textarea placeholderClass="input-placeholder" class="text-body" placeholder="请输入工作内容"
						v-model="form.work_detail"></u--textarea>
				</view>
			</view>

			<view class="form-item">
				<view class="label">停电厂站</view>
				<view class="input">
					<u--input placeholderClass="input-placeholder" class="text-body" placeholder="请输入停电厂站"
						v-model="form.factory_stations"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">五级电网风险</view>
				<u-radio-group v-model="form.is_high_risk" placement="column" >
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name="item.name" >
					</u-radio>
				</u-radio-group>
			</view>
			<view class="form-item">
				<view class="label">五级电网风险描述</view>
				<view class="input">
					<u--textarea placeholderClass="input-placeholder" class="text-body" placeholder="请输入五级电网风险描述"
						v-model="form.risk_desc"></u--textarea>
				</view>
			</view>

			<view class="form-item">
				<view class="label">开始时间</view>
				<view class="input">
					<view class="input-body" @click="handleShowTime('start_date')">{{form.start_date}}</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">结束时间</view>
				<view class="input">
					<view class="input-body" @click="handleShowTime('end_date')">{{form.end_date}}</view>
				</view>
			</view>
		</view>
		<view class="form-item upload-wrap">
			<view class="label">风险管控图</view>
			<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic" multiple
				:maxCount="6"
				>
				<!-- <view class="iconfont icon-tupian"></view> -->
			</u-upload>
		</view>
		<view class="custom-button custom-button-shadow" @click="submit">
			提交
		</view>

		<u-datetime-picker :show="showTime" closeOnClickOverlay mode="date" v-model="timeStamp" @confirm="confirmTime"
			@cancel="showTime = false" @close="showTime = false">
		</u-datetime-picker>
	</view>
</template>

<script>
	import {
		addOutageApi
	} from '@/api/outage.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import timeLine from '@/components/time_line/index.vue';
	import {
		uploadUrl
	} from '@/baseUrl.js';
	export default {
		components: {
			timeLine
		},
		data() {
			return {
				name: '',
				id: '',
				list: [],
				showPop: false,
				form: {},
				type: 'add',
				info: {},
				showTime: false,
				timeType: '',
				timeStamp: Number(new Date()),
				fileList: [],
				file_id: '', //上传图片id
				radiolist: [{
						name: '是',
					},
					{
						name: '否',
					}
				],
			};
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
			})
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			//上传照片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						file_id: result.data.file_id,
						file_path: result.data.file_path,
					}))
					fileListLen++
					
				}
				console.log(this.fileList);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						},fail(res) {
							console.log(res);
						}
					});
				})
			},
			confirmTime(val) {
				const timeStamp = val.value;
				this.form[this.timeType] = this.formatDate(timeStamp);
				this.closeShowTime();
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				const h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();;
				return Y + M + D;
			},
			handleShowTime(type) {
				this.timeType = type;
				this.showTime = true;
			},
			closeShowTime() {
				this.showTime = false;
			},
			submit() {
				let obj = {};
				obj = {
					file_id: this.fileList[0]? this.fileList.map((obj)=>{
						  return  obj.file_id
						}).join(","):'',
					project_name: this.curProject.project_name,
					project_id: this.curProject.id,
					...this.form,
				}
				this.addRisk(obj);
			},
			addRisk(obj) {
				uni.showLoading({
					title: '加载中...'
				});
				addOutageApi({
					...obj
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon: 'success'
						});
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '操作失败',
							duration: 1000,
							icon: 'error'
						});
						uni.hideLoading();
					}
				});
				uni.navigateBack({
					delta: 1
				})
			},
			clearForm() {
				for (let key in this.form) {
					this.form[key] = ''
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.section-pop {
		width: 100%;
		border-radius: 50rpx;
		padding-top: 50rpx;
		// padding-bottom: 50rpx;
	}

	.form-item {
		width: 750rpx;
		line-height: 48rpx;
		margin: 0 auto;
		margin-bottom: 25rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 40rpx;

		&:last-child {
			margin-bottom: 34rpx;
		}

		&.upload-wrap {
			align-items: unset;
			height: unset;
			line-height: unset;
		}

		@include clear();

		.label {
			float: left;
			width: 160rpx;
			height: 48rpx;
			text-align: left;
			line-height: 44rpx;
			font-size: 26rpx;
			color: #46464a;
		}

		/deep/ .u-upload__wrap {
			// width: calc(100% - 206rpx) !important;
			width: calc(100%) !important;
			background-color: transparent;
		}

		.icon-tupian {
			position: absolute;
			right: 25rpx;
			line-height: 44rpx;
			color: #1534ce;
			font-size: 28rpx;
		}

		/deep/ .u-radio-label--left {
			margin-right: 55rpx;
		}

		/deep/ .u-radio__text {
			font-size: 26rpx !important;
			color: #46464a !important;
		}

		.input {
			float: left;
			width: calc(100% - 134rpx - 3rpx - 30rpx);
			border-radius: 20rpx;
			border: solid 2rpx #1534ce;

			.input-body {
				box-sizing: border-box;
				width: 100%;
				height: 44rpx;
				padding: 0 !important;
				border: none;
				padding-left: 30rpx !important;
				padding-right: 30rpx !important;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.8);
				line-height: 44rpx;

				/deep/ .uni-input-input {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.8);
				}
			}

			.text-body {
				box-sizing: border-box;
				width: 100%;
				padding: 0 !important;
				border: none;
				padding-left: 30rpx !important;
				padding-right: 30rpx !important;
				padding-top: 15rpx;
				padding-bottom: 15rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.8);
				line-height: 30rpx;
				border-radius: 20rpx;

				/deep/ .uni-textarea-textarea {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.8);
				}
			}

			.input-placeholder {
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}

	}


	.content {
		background-color: #fff;
	}

	.custom-button-wrapper {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 40rpx;
		position: fixed;
		bottom: 30rpx;
		z-index: 99;

		.custom-button {
			width: 250rpx;
			box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
		}
	}

	.section-0 {
		width: 100%;
		background-color: #3a5df5;

		.section-body {
			padding-top: 50rpx;

			.peoject-name {
				margin-bottom: 65rpx;
				width: 100%;
				height: 158rpx;
				background-color: #ffffff;
				border-radius: 35rpx;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);

				.title {
					width: 533rpx;
					height: 50rpx;
					padding-top: 15rpx;
					line-height: 50rpx;
					border-bottom: solid 3rpx #f2f2f0;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #8497ac;
					margin-left: 35rpx;
				}

				.name {
					box-sizing: border-box;
					padding: 0 35rpx;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #46464a;

					.iconfont {
						float: right;
						font-size: 30rpx;
						color: #3b3c40;
					}
				}
			}

			box-sizing: border-box;
			width: 100%;
			padding-left: 40rpx;
			padding-right: 40rpx;
			padding-bottom: 100rpx;
			background-color: #fff;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
		}
	}
</style>
